<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul, ol, li {
      list-style: none;
    }

    .banner {
      width: 600px;
      height: 400px;
      border: 10px solid #333;
      margin: 30px auto;
      position: relative;
    }

    .banner > ul {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .banner > ul > li {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 100px;
      background-color: pink;
      opacity: 0;
      transition: opacity 1s;
    }

    .banner > ul > li.active {
      opacity: 1;
    }

    .banner > ol {
      height: 30px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      background-color: rgba(0, 0, 0, .4);
      border-radius: 15px;
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }

    .banner > ol > li {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
      margin: 0 6px;
    }

    .banner > ol > li.active {
      background-color: purple;
    }

    .banner > .leftRight {
      width: 100%;
      height: 40px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-between;
    }

    .banner > .leftRight > span {
      width: 20px;
      height: 100%;
      background-color: rgba(0, 0, 0, .4);
      color: #fff;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="banner" id="banner">
    <!-- 约定： ul 是内容 - box -->
    <ul class="imgBox">
      <li style="background-color: red;">1</li>
      <li style="background-color: orange;">2</li>
      <li style="background-color: green;">3</li>
      <li style="background-color: skyblue;">4</li>
      <li style="background-color: yellow;">5</li>
      <li style="background-color: blue;">6</li>
    </ul>

    <!-- 约定：ol 是 翻页 - point -->
    <ol class="pointBox">
    </ol>

    <!-- 约定 - class 名为 leftRight 是 左右 按钮 -->
    <div class="leftRight">
      <span class="left">&lt;</span>
      <span class="right">&gt;</span>
    </div>
  </div>
</body>
</html>

<script>
/* 
autoPlay -> 自动轮播的效果    Y
  - mouseEnterStopAutoPlay
  - mouseLeaveAutoPlay

leftRightClick

createPoints
  - pointFlowAutoPlay
  - clickPoint
*/

class AutoPlay {
  // container 可以是 dom 元素，也可以是 字符串形式的 css 选择器
  constructor(container, autoPlayTime = 2000) {
    // 自动轮播的 间隔时间
    this.autoPlayTime = autoPlayTime;

    this.container = typeof container === 'string'
      ? document.querySelector(container) // 此时的 container 是 css选择器，如 '#banner'
      : container; // 此时的 container 是 JS 的 DOM 变量

    this.boxLis = this.container.querySelectorAll('ul > li');
    this.containerPoints = this.container.querySelector('ol');

    // 值为 什么，即显示 box index 对应的 页面
    this.activeIndex = 0;

    this.timerId = null;

    // 开启 自动磨轮
    this.autoPlay();

    // 绑定 鼠标 移入时，停止自动轮播； 鼠标 移出时，继续轮播
    this.bindMouseEnterLeaveEvent();

    // 绑定 点击 左  和  右，的点击事件
    this.bindLeftRightClick(); 

    // 创建 point 相关的 <li>
    this.createPoints();

    // 获取 所有的 point 相关的 <li>
      // 注：获取 DOM 元素时，一定要确保 DOM元素 存在
    this.pointLis = this.container.querySelectorAll('ol > li');

    // 渲染 activeIndex 对应 页面
    this.render(); // 注：render 操作了  ol > li，所以一定要 确保 render 在 有了 point 的 <li> 之后再执行

    // 为 每个 point 的 <li> 绑定 点击事件
    this.bindPointClickEvent();
  }

  // 自动轮播的效果
  autoPlay() {
    this.timerId = setInterval(() => {
      this.activeIndex++;

      // 从头开始，继续 轮播
      if (this.boxLis.length === this.activeIndex) {
        this.activeIndex = 0;
      }
      this.render();
    }, this.autoPlayTime);
  }

  bindMouseEnterLeaveEvent() {
    // 鼠标进入，轮播停止
    this.container.addEventListener('mouseenter', e => {
      // console.log('mouseenter');
      clearInterval(this.timerId);
    });

    // 鼠标移出，轮播继续
    this.container.addEventListener('mouseleave', e => {
      this.autoPlay();
    });
  }

  render() {
    // 响应 Box 相关
    this.boxLis.forEach(li => li.className = '');
    this.boxLis[this.activeIndex].className = 'active';


    // 响应 point 相关
    this.pointLis.forEach(li => li.className = '');
    this.pointLis[this.activeIndex].className = 'active';
  }

  bindLeftRightClick() {
    const domLeft = this.container.querySelector('.left');
    domLeft.addEventListener('click', e => {
      this.activeIndex--;

      if (this.activeIndex === -1) {
        // 若 activeIndex 向左”越界“， box 回到 最后一页
        this.activeIndex = this.boxLis.length - 1;
      }
      this.render();
    });

    const domRight = this.container.querySelector('.right');
    domRight.addEventListener('click', e => {
      console.log('right');
      this.activeIndex++;
      if (this.activeIndex === this.boxLis.length) {
        // 若 activeIndex 向右”越界“， box 回到 第一页
        this.activeIndex = 0;
      }
      this.render();
    })
  }

  createPoints() {
    this.boxLis.forEach(() => {
      const li = document.createElement('li');
      this.containerPoints.appendChild(li);
    })
  }

  bindPointClickEvent() {
    this.pointLis.forEach((li, index) => {
      li.addEventListener('click', e => {
        this.activeIndex = index;
        this.render();
      })
    })
  }

}

const dom = document.querySelector('#banner');

// const autoPlay = new AutoPlay('.banner');  // 两种写法 都要 兼容
new AutoPlay(dom, 1000); // 两种写法 都要 兼容


// console.log(oAutoPlay);
</script>